<template>
	<view class="page index">
		<view class="header">
			<common-search v-model="keyWord" :is-filter="false"></common-search>
		</view>
		<view class="main">
			<scroll-view class="scroll" scroll-y="true" :show-scrollbar="false" :enhanced="true">
				<view class="mail-list">
					<view class="mail-item" v-for="item in 8" :key="item">
						<view class="left">
							<view class="avatar">
								<image src="" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="mem">
									张业务 | 客户一部
								</view>
								<view class="phone">
									13511111111
								</view>
							</view>
						</view>
						<span class="iconfont icon">&#xe611;</span>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import commonSearch from "@/components/commonSearch.vue";
	export default{
		data(){
			return{
				keyWord:''
			}
		},
		components:{
			commonSearch
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 30rpx;
		@include flex-c;
		.header{
			flex: 0 0 auto;
		}
		.main{
			flex: 1 0 0;
			overflow: hidden;
			.scroll{
				height: 100%;
				.mail-list{
					padding: 24rpx 0 0;
					.mail-item{
						height: 112rpx;
						@include flex-r-between-center;
						border-top: 4rpx #d6d6d6 solid;
						.left{
							@include flex-r-start-center;
							.avatar{
								@include avatar(64);
								background-color: #000;
							}
							.info{
								padding-left: 28rpx;
								.mem{
									padding: 0 0 12rpx;
									font-size: 28rpx;
									color: #000;
								}
								.phone{
									font-size: 26rpx;
									color: #9A9A9A;
								}
							}
						}
						.icon{
							padding-right: 30rpx;
							color: #4095E5;
							font-size: 60rpx;
						}
					}
				}
			}
		}
	}
</style>